<header>
  <nav>
    <div class="container">
      <div class="nav-wrapper">
        <a href="index.html" class="brand-logo">Materialize</a>
        <ul class="right sidenav" id="nav-mobile">
          <li class="hide-on-small-only"><a href="parallax.html"><i class="material-icons">arrow_back</i></a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="getting-started.html">Getting Started</a></li>
          <li><a href="sass.html">Sass</a></li>
          <li><a href="badges.html">Components</a></li>
          <li class="active"><a href="collapsible.html">JavaScript</a></li>
        </ul>
        <a class="sidenav-trigger" href="#" data-target='nav-mobile'><i class="material-icons">menu</i></a>
      </div>
    </div>
  </nav>
</header>

<main>
<!--  Parallax Section  -->
  <div class="parallax-container">
    <div class="parallax"><img src="images/parallax1.jpg"></div>
  </div>
  <div class="section white">
    <div class="row container">
      <h2 class="header">Parallax</h2>
      <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
    </div>
    <div class="row container">
      <h4 class="light">Parallax Demo HTML</h4>
      <pre><code class="language-markup col s12">
  &lt;div class="parallax-container">
    &lt;div class="parallax">&lt;img src="images/parallax1.jpg">&lt;/div>
  &lt;/div>
  &lt;div class="section white">
    &lt;div class="row container">
      &lt;h2 class="header">Parallax&lt;/h2>
      &lt;p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.&lt;/p>
    &lt;/div>
  &lt;/div>
  &lt;div class="parallax-container">
    &lt;div class="parallax">&lt;img src="images/parallax2.jpg">&lt;/div>
  &lt;/div>
      </code></pre>
    </div>
  </div>
  <div class="parallax-container">
    <div class="parallax"><img src="images/parallax2.jpg"></div>
  </div>
